<template>
	<x-popup :value="value" zIndex="999999" mode="bottom" @close="$emit('input', false)">
		<view class="share-container">
			<view class="flex-between u-m-b-26" style="position: relative;">
				<view></view>
				
				<view class="share-title u-f-36 u-lh-50 font-medio">分享</view>
				
				<image src="@/static/image/common/close_grew.png" style="width: 30rpx; height: 28rpx;"
					class="clear-flex" @click="$emit('input', false)"></image>
			</view>
			
			<view class="u-text-center">
				<u-row>
					<u-col
					v-for="(item, index) in shares" :key="index"
					:span="3"
					>
						<view class="u-p-b-20 u-text-center" @click="changeAction(item)">
							<view>
								<image :src="item.icon" style="width: 100rpx; height: 100rpx;"></image>
							</view>
							
							<view class="u-p-t-12 u-f-22 u-lh-32">{{ item.label }}</view>
						</view>
					</u-col>
				</u-row>
				
			</view>
		</view>
	</x-popup>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			info: {
				// type 类型，用于
				// show 展示弹窗按钮
				// image 卡片图片
				// content 卡片内容
				// copy 复制的内容
				default: () => ({})
			}
		},
		data() {
			let shares = [
					{ key: 'shop', label: '商铺信息', value: 1 },
					{ key: 'collage', label: '拼团信息', value: 2 },
				].map(item => ({ ...item, icon: require(`@/static/image/share/${ item.key }_share@2x.png`) }))
			return {
				shares
			}
		},
		methods: {
			changeAction(item) {
				return
				uni.shareWithSystem({
				  summary: '',
				  href: 'https://uniapp.dcloud.io',
				  success: (res) => {
					  console.log(res)
				    // 分享完成，请注意此时不一定是成功分享
				  },
				  fail: (e) => {
					  console.log(e)
				    // 分享失败
				  }
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.share {
		&-container {
			padding: 36rpx 38rpx 0;
			border-top-left-radius: 30rpx !important;
			border-top-right-radius: 30rpx !important;
			background-color: #FFFFFF;
			padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
			padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
		}
		
		&-title {
			position: absolute;
			left: 50%;
			transform: translateX(-50%)
		}
		
		&-image {
			width: 124rpx;
			height: 124rpx;
			border-radius: 4rpx;
			overflow: hidden;
			background-color: #f9f9f9;
		}

		&-item {
			display: inline-block;
			padding: 10rpx 26rpx;
			border-radius: 4rpx;
			color: #999999;
			background-color: #F9F9F9;
			border: 2rpx solid #f9f9f9;

			&-active {
				@extend .share-item;
				color: #FC2642;
				background-color: rgba(252, 38, 66, 0.07);
				border-color: #FC2642;
			}
		}
	}
</style>
